<template>
	<view class="content">
		<view class="body">
			<view class="cell">
				<radio-group @change="radioChange" class="cell-car">
					<view class="label-car">
						<label>
							<radio value="1" :checked="isWork === 1" />
							已出车
						</label>
					</view>
					<view class="label-car">
						<label class="label-car">
							<radio value="0" :checked="isWork === 0" />
							未出车
						</label>
					</view>
				</radio-group>
			</view>
			<view class="cell cell-bottom-line">
				<text class="cell-key">编号</text>
				<input placeholder="请输入编号" disabled class="cell-value" type="text" v-model="code" />
			</view>
			<view class="cell cell-bottom-line">
				<text class="cell-key">车牌号</text>
				<input placeholder="请输入车牌号" disabled class="cell-value" type="text" v-model="plateNumber" />
			</view>
			<view class="cell cell-bottom-line">
				<text class="cell-key">司机</text>
				<input placeholder="请输入司机" disabled class="cell-value" type="text" v-model="driverName" />
			</view>
			<view class="cell cell-bottom-line">
				<text class="cell-key">手机号</text>
				<input placeholder="请输入手机号" disabled class="cell-value" type="text" v-model="phone" />
			</view>
			<view class="cell cell-bottom-line">
				<text class="cell-key">时间</text>
				<input placeholder="请输入报修时间" disabled class="cell-value" type="text" v-model="time" />
			</view>
			<!-- <view class="cell">
				<text class="cell-key">车辆状态:</text>
				<input disabled class="cell-value" type="text" :value="secureCarSatus == 1 ? '正常' : '异常'" />
			</view> -->
			<view class="cell cell-bottom-line">
				<text class="cell-key">报修原因</text>
				<input placeholder="请输入报修原因" disabled class="cell-value" type="text" v-model="reason" />
			</view>
			<view class="secure">
				<button :class="secureCarSatus != 1 ? 'secureBtn' : ''" @click="secureCar" :disabled="secureCarSatus != 1 ? false : true" type="primary" size="mini" plain="true">
					解除车辆报修
				</button>
			</view>
		</view>
		<view class="footer">
			<button :class="secureCarSatus != 1 ? 'btn-cancel' : 'btn-commit'" :disabled="secureCarSatus != 1 ? true : false" type="primary" @click="wrongSave">提交</button>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import wrongjs from '@/api/wrong.js';
import date from '@/utils/date.js';
import common from '@/utils/common.js';
export default {
	computed: { ...mapGetters(['token']) },
	data() {
		return {
			code: '',
			plateNumber: '',
			driverName: '',
			phone: '',
			time: '',
			isWork: 1,
			reason: '',
			taskId: '',
			secureCarSatus: 1
		};
	},
	onLoad(option) {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		this.initPage(option);
	},
	methods: {
		async initPage(option) {
			let res = await wrongjs.getCarDetail(this.token);
			if (common.httpIsWrong(res)) return;
			let data = res.json.data.data[0];
			console.log(res);
			this.code = data.code;
			this.plateNumber = data.plateNumber;
			this.driverName = data.driverName;
			this.phone = data.phone;
			this.time = date.formatDate(new Date(), 1);
			this.isWork = Number(option.isWork);
			this.taskId = Number(option.taskId);
			this.secureCarSatus = data.status;
		},
		radioChange(e) {
			this.isWork = Number(e.detail.value);
		},
		async secureCar() {
			let res = await wrongjs.secureCar(this.code, this.token);
			if (common.httpIsWrong(res)) return;
			uni.$u.toast('解除车辆成功');
			this.secureCarSatus = 1;
		},
		async wrongSave() {
			if (!this.reason) {
				uni.$u.toast('原因不能为空');
				return;
			}
			let param = {
				reason: this.reason,
				vehicleId: this.code,
				isTasking: this.isWork,
				taskId: this.taskId,
				token: this.token
			};
			let res = await wrongjs.wrongDataSave(param);
			if (common.httpIsWrong(res)) return;
			let that = this;
			uni.showToast({
				icon: 'none',
				title: '数据提交成功',
				success() {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	.header {
		margin: 30rpx 0;
		.header-title {
			font-size: 40rpx;
		}
	}
	.body {
		width: 100%;
		.secure {
			padding: 0 40rpx;
			text-align: right;
			margin: 40rpx 0;
			.secureBtn {
				background-color: white;
				border: solid 1rpx #1a90e4;
				color: #1a90e4;
			}
		}
		.cell-car {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			.label-car {
				width: 35%;
				text-align: center;
			}
		}
		.cell2 {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0 0 0;
			.cell-key {
				width: 240rpx;
			}
			.cell-area {
				width: 100%;
				height: 120rpx;
				color: #1a90e4;
				border: solid 1rpx #dfdfdf;
				padding: 20rpx 10rpx 20rpx 0;
				text-align: right;
				border-radius: 10rpx;
			}
		}
		.cell-bottom-line {
			// border-bottom: solid 1rpx #dfdfdf;
		}
		.cell {
			margin: 0 40rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.cell-key {
				width: 240rpx;
			}
			.cell-value {
				flex: 1;
				color: #1a90e4;
			}
			.cell-value-time {
				flex: 1;
				color: #1a90e4;
				text-align: right;
				padding-right: 10rpx;
				letter-spacing: 0;
			}
		}
	}
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		.btn-commit {
			width: 98%;
			background-color: #1a90e4;
		}
		.btn-cancel {
			width: 98%;
			background-color: #cacaca;
		}
	}
}
::v-deep .uni-textarea-textarea {
	color: #1a90e4;
}
</style>
